<!-- 我的考试页面 - 纯刷题入口 -->
<template>
  <div id="myExam">
    <div class="title">智能刷题</div>
    <div class="wrapper">
      <!-- 刷题设置区域 -->
      <div class="practice-settings">
        <!-- 刷题模式选择 -->
        <div class="setting-item">
          <label>刷题模式：</label>
          <el-radio-group v-model="practiceMode" size="medium">
            <el-radio label="random">随机刷题</el-radio>
            <el-radio label="sequence">顺序刷题</el-radio>
          </el-radio-group>
        </div>

        <!-- 随机刷题配置区域：仅在 random 模式下显示 -->
        <div class="setting-item" v-if="practiceMode === 'random'">
          <div style="padding: 16px; background: #f9f9f9; border-radius: 6px; border: 1px dashed #ddd;">
            <div style="font-weight: 600; margin-bottom: 12px; color: #333;">刷题配置</div>

            <el-form :model="paperConfig" label-width="100px" size="small">
              <el-form-item label="单选题数量">
                <el-input-number v-model="paperConfig.multipleCount" :min="0" :max="50" />
              </el-form-item>

              <el-form-item label="多选题数量">
                <el-input-number v-model="paperConfig.fillCount" :min="0" :max="50" />
              </el-form-item>

              <el-form-item label="判断题数量">
                <el-input-number v-model="paperConfig.judgeCount" :min="0" :max="50" />
              </el-form-item>
            </el-form>

            <!-- 总题数提示 -->
            <div style="font-size: 12px; color: #999; margin-top: 8px;">
              总题数: {{ totalQuestions }} 题
            </div>
          </div>
        </div>

        <!-- 题库选择 -->
        <div class="setting-item" v-if="banks.length > 0">
          <label>选择题库：</label>
          <el-select v-model="selectedBank" style="width: 200px;">
            <el-option
              v-for="bank in banks"
              :key="bank.bankId"
              :label="bank.subject"
              :value="bank.subject"
            ></el-option>
          </el-select>
        </div>

        <!-- 无题库提示 -->
        <div class="setting-item" v-else>
          <span class="no-bank">⚠️ 暂无可用题库，请联系管理员</span>
        </div>

        <!-- 开始刷题按钮 -->
        <div class="setting-item">
          <el-button
            type="primary"
            size="large"
            @click="startPractice"
            :disabled="!selectedBank"
            icon="el-icon-edit"
            style="padding: 12px 30px; font-size: 16px;"
          >
            开始刷题
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      practiceMode: 'random',    // 刷题模式
      banks: [],                 // 题库列表
      selectedBank: null,        // 当前选中的题库（字符串）

      // 随机刷题配置
      paperConfig: {
        multipleCount: 20,   // 单选题数量
        fillCount: 20,        // 多选题数量
        judgeCount: 20,       // 判断题数量
      }
    }
  },
  computed: {
    // 计算总题数
    totalQuestions() {
      return (
        this.paperConfig.multipleCount +
        this.paperConfig.fillCount +
        this.paperConfig.judgeCount
      );
    }
  },
  created() {
    this.getBankList()
  },
  methods: {
    // 获取题库列表
    getBankList() {
      this.$axios.get('/api/banks')
        .then(res => {
          if (res.data.code === 200) {
            this.banks = Array.isArray(res.data.data) ? res.data.data : [];
            // ✅ 默认选中第一个题库的 subject
            if (this.banks.length > 0) {
              this.selectedBank = this.banks[0].subject;
            }
          } else {
            this.$message.error('获取题库失败：' + res.data.message);
          }
        })
        .catch(err => {
          console.error('获取题库失败：', err);
          this.$message.error('无法连接题库服务');
        });
    },

    // 开始刷题
    startPractice() {
      if (!this.selectedBank) {
        this.$message.warning('请先选择题库');
        return;
      }

      const query = {
        mode: this.practiceMode,
        subject: this.selectedBank
      };

      // 如果是随机刷题，带上题目配置
      if (this.practiceMode === 'random') {
        Object.assign(query, {
          multipleCount: this.paperConfig.multipleCount,
          fillCount: this.paperConfig.fillCount,
          judgeCount: this.paperConfig.judgeCount
        });
      }
      console.log('🚀 即将跳转，query 参数：', query);

      this.$router.push({
        path: '/brushQuestion',
        query: query
      });
    }
  }
}
</script>

<style lang="less" scoped>
#myExam {
  width: 900px;
  margin: 40px auto;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px 60px;
}

.practice-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
}

.setting-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.setting-item label {
  font-size: 16px;
  color: #333;
  min-width: 80px;
  font-weight: 500;
}

.no-bank {
  color: #e74c3c;
  font-size: 14px;
  font-style: italic;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .wrapper {
    padding: 30px 20px;
  }
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .setting-item label {
    margin-bottom: 8px;
  }
}
</style>